·<template>
  <cj-popup v-model="showGiftModal" round position="bottom" @close="closeGift" :title="popType == 1 ? '赠送' : '课程资料下载'" :closeable="true">
    <div class="c-bg-white c-pt20 c-pb32 c-ph24 c-br-tr16 c-br-tl16 c-flex-column c-minh50vh">
      <!-- <div class="c-p c-flex-shrink0 c-mb20">
        <div class="c-fs28 c-fc-xblack  c-fw-b c-flex-row  c-justify-center ">{{ popType == 1 ? '赠送' : '课程资料下载' }}</div>
        <div class="c-fs24 c-fc-gray c-pa c-p-t8 c-p-r8 iconfont" @click="closeGift">&#xeca0;</div>
      </div> -->
      <div class="c-flex-grow1 c-contexty-scroll">
        <div v-if="totalPrice > 0 && popType == 1" class="c-fs22 c-fc-xblack c-fw500">商品总价值：<span class="c-fs22 c-fc-xmlred">￥</span> <span class="c-fc-xmlred c-fw-b c-fs36" v-html="$getPriceStyleHtml(totalPrice)"></span>
        </div>
        <div v-else-if="popType == 2" class="c-fs22 c-fc-sblack c-fw500">获得课程权限后可免费下载资料</div>
        <div v-else class="c-pv12"></div>
        <div class="c-mt30 ">
          <div v-if="popType == 1" class="c-fc-gray c-fs22 c-mt20 c-pv20 c-bg-f8 c-ph24 c-hp50 c-br20 c-lh38" v-html="tipText || `<p class='c-fw-b c-fc-sblack c-lh40'>以下情况不支持赠送礼包：</p>1. 通过搭配购、好友灌溉或团购获得课程</br> 2. 赠品库存不足时，将不会获得无库存的赠品`"></div>
          <div v-for="(item, index) in prodList" :key="index" class="c-flex-row c-mt40" :class="index == prodList.length - 1 ? '' : 'c-mb40'" @click="clickGoDetail(item)">
            <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-text-hidden c-p">
              <vip-custom-img
                v-if="((isFromOrder || hasBuy ? item.prodType : item.relateType) == cfrom.vip || (isFromOrder || hasBuy ? item.prodType : item.relateType) == cfrom.svip) && popType == 1"
                :cover="item.relateCover"
                :imgShowType="'blur'"
                :imgClass="'imgCloseBig c-br16'"
                :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'"
                :font-class="{
                  boxStyle: 'c-pv20 c-pl12',
                  name: 'c-fs24 c-text-ellipsis1 c-fw-b',
                  duration: 'c-fs18'
                }"
                :content="{ name: item.relateName, duration: item.duration, durationType: item.durationType }"
              />
              <CoverImg v-else :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" :imgClass="'c-br16'" :coverUrl="$addXossFilter(popType == 1 ? item.relateCover : item.cover, require('../../assets/defult270.png'))" :prodType="item.prodType" />
              <div v-if="popType == 1" class="c-ph10 c-hh32 c-flex-row c-flex-center c-fs18 c-fc-white c-translucent-balck50 c-pa c-p-r8 c-p-b8 c-br8">
                {{ typeTextMap[isFromOrder || hasBuy ? item.prodType : item.relateType] }}
              </div>
              <div v-if="item.relateType == 12 && item.stock == 0" class="c-fs24 c-fc-white c-translucent-balck70 c-h c-w100 c-pa c-p-l0 c-p-t0 c-pz9 c-flex-row c-flex-center">补货中</div>
            </div>
            <div class="c-w0 c-flex-grow1 c-flex-column c-ml20 c-justify-sb">
              <div :class="popType == 2 ? 'c-pt8' : ''" class="c-fc-xblack c-fs24 c-text-ellipsis2">{{ popType == 1 ? item.relateName : item.name }}</div>
              <template v-if="popType == 1">
                <div v-if="(isFromOrder || hasBuy) && (item.prodType == 110 || item.prodType == 111 || item.prodType == 112 || item.prodType == 9 || item.prodType == 61)" class="c-fc-gray c-fs20">
                  {{
                    item.isValid == 1
                      ? '长期有效'
                      : (item.prodType == 9 || item.prodType == 61) && item.validDay
                        ? item.validDay + '天有效'
                        : item.validTime
                          ? item.validTime + '天有效'
                          : item.validAt
                            ? '有效期至' + item.validAt
                            : ''
                  }}
                </div>
                <div
                  v-if="!(isFromOrder || hasBuy) && (item.relateType == 110 || item.relateType == 111 || item.relateType == 112 || item.relateType == 9 || item.relateType == 61)"
                  class="c-fc-gray c-fs20"
                >
                  {{ item.isValid == 1 ? '长期有效' : item.validDay && item.isValid == 0 ? item.validDay + '天有效' : item.validAt && item.isValid == 2 ? '有效期至' + item.validAt : '' }}
                </div>
                <!-- 非订单页 或者 订单页但是待支付 -->
                <template v-if="(!isFromOrder && !hasBuy) || orderStatus == 0">
                  <div class="c-flex-row c-justify-sb c-aligni-center">
                    <div v-if="item.isSaleOnly == 0 && item.isSaleTogether" class="c-fc-xmlred c-fs22 c-fw600">关联售卖</div>
                    <div v-else-if="item.payType == 3" class="c-fc-xmlred c-fs22 c-fw600">加密</div>
                    <div v-else-if="Number(item.relateProdPrice) == 0" class="c-fc-xmlred c-fs22 c-fw600">免费</div>
                    <div v-else class="c-fc-xmlred c-fs24 c-fw600">
                      <span>{{ '￥' | iosPriceFilter(item.optimal) }}</span
                      >{{ item.payType | priceValueFilter(item.relateProdPrice, item.prodType, item.optimal) }}
                    </div>
                    <div class="c-fc-gray c-fs22">x1</div>
                  </div>
                </template>
                <template v-else>
                  <div class="c-flex-row c-justify-sb c-aligni-center">
                    <div v-if="item.isSaleOnly == 0 && item.isSaleTogether" class="c-fc-xmlred c-fs22 c-fw600">关联售卖</div>
                    <div v-else-if="item.payType == 3" class="c-fc-xmlred c-fs22 c-fw600">加密</div>
                    <div v-else-if="Number(item.relateProdPrice) == 0" class="c-fc-xmlred c-fs22 c-fw600">免费</div>
                    <div v-else class="c-fc-xmlred c-fs22 c-fw600">
                      <span>{{ '￥' | iosPriceFilter(item.optimal) }}</span
                      >{{ item.payType | priceValueFilter(item.relateProdPrice, item.prodType, item.optimal) }}
                    </div>
                    <div
                      v-if="(isShowBtn && item.status == 0 && item.prodType == 12 && (isFromOrder || hasBuy)) || (item.receiveStatus != 1 && item.relateType == 12 && !isFromOrder && !hasBuy)"
                      class="c-fs22 c-fc-white theme-bg c-ww100 c-hh40 c-flex-row c-flex-center c-br20"
                      @click.stop="clickBtn(item)"
                    >
                      兑换
                    </div>
                    <div
                      v-else-if="isShowBtn && fromProdType == cfrom.activity && item.status == 0"
                      class="c-fs22 c-fc-white theme-bg c-ww100 c-hh40 c-flex-row c-flex-center c-br20"
                      @click.stop="receiveGift(item, index)"
                    >
                      领取
                    </div>
                    <div v-else-if="isShowBtn" class="c-fs22 theme-fc theme-bd1 c-ww100 c-hh40 c-flex-row c-flex-center c-br20" @click.stop="clickBtn(item)">查看</div>
                  </div>
                </template>
              </template>
              <template v-else>
                <div v-if="item.payType == 3" class="c-fc-xmlred c-fs22 c-pb8 c-fw600">加密</div>
                <div v-else-if="Number(item.relateProdPrice) == 0" class="c-fc-xmlred c-fs22 c-pb8 c-fw600">免费</div>
                <div v-else class="c-fc-xmlred c-fs22 c-pb8 c-fw600">
                  <span>{{ '￥' | iosPriceFilter(item.optimal) }}</span
                  >{{ item.payType | priceValueFilter(item.prodPrice, item.prodType, item.optimal) }}
                </div>
              </template>
            </div>
          </div>
        </div>
        <loading-status-tem :no-data="prodList.length == 0" :no-data-text="'暂无相关商品'"></loading-status-tem>
      </div>
    </div>
  </cj-popup>
</template>
<script>
import VipCustomImg from '@/components/templates/common/VipCustomImg.vue';
import loadingStatusTem from '@/components/templates/common/loadingStatusTem.vue';
import CoverImg from '@/components/templates/common/coverImg.vue';
import { goDetails } from '@/utils/goDetails.js';
import { utilJs } from '@/utils/common.js';
export default {
  name: 'RelatedCombo',
  components: {
    loadingStatusTem,
    VipCustomImg,
    CoverImg
  },
  props: {
    isFromOrder: {
      type: Boolean,
      default: false
    },
    hasBuy: {
      type: Boolean,
      default: false
    },
    showGiftModal: {
      type: Boolean,
      default: false
    },
    prodList: {
      type: Array,
      default: () => []
    },
    orderStatus: {
      type: Number,
      default: -1
    },
    popType: {
      type: Number,
      default: 1
    },
    fromCourseId: {
      type: Number,
      default: 0
    },
    fromProdType: {
      // 来自什么产品
      type: Number,
      default: 0
    },
    tipText: {
      // 提示文案
      type: String,
      default: ''
    },
    isShowBtn: {
      // 是否需要展示兑换/查看/领取等按钮，默认展示
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      cfrom: global.ckFrom,
      typeTextMap: global.prodMapType
    };
  },
  computed: {
    totalPrice() {
      let priceTmp = 0;
      for (let i = 0; i < this.prodList.length; i++) {
        priceTmp = priceTmp + Number(this.prodList[i].relateProdPrice);
      }
      return Number(priceTmp).toFixed(2);
    }
  },
  methods: {
    receiveGift(item, index) {
      // 活动礼包手动领取
      const data = {
        grId: item.grId
      };
      utilJs.postMethod(`${global.apiurl}activities/receiveGift`, data, res => {
        this.$showCjToast({
          text: '领取成功',
          type: 'success',
        });
        this.prodList[index].status = 1;
        this.$emit('receiveGiftSuccess');
      });
    },
    closeGift() {
      this.$emit('closeGift');
    },
    clickBtn(bItem) {
      if (this.isFromOrder || this.hasBuy) {
        if (bItem.prodType != 12) {
          this.clickGoDetail(bItem);
        } else if (bItem.prodType == 12 && (bItem.status == 1 || (bItem.goId && bItem.orderStatus != -2 && bItem.orderStatus != -3 && bItem.orderStatus != -4 && bItem.orderStatus != -5))) {
          // orderStatus: 0 未支付  1已支付 2发货3 收货 4完成  5已退款  6退款失败  -1失效订单(支付失败，包括超库存退款) -2取消订单 -3已关闭订单 -4删除订单 -5商家取消订单'
          // status: 0 未兑换 1 已兑换
          this.goShopOrderDetail(bItem.goId, bItem.orderNo);
        } else if (bItem.prodType == 12 && bItem.status == 0) {
          this.getShopInfo(bItem.prodId, bItem.grId);
        }
      } else {
        if (bItem.receiveStatus != 1 && bItem.relateType == 12) {
          this.getShopInfo(bItem.relateId, bItem.grId);
        } else {
          this.clickGoDetail(bItem);
        }
      }
    },
    goShopOrderDetail(goId, orderNo) {
      this.$routerGo(this, 'push', {
        path: '/mall/mallOrder/orderDetail',
        query: {
          goId: goId,
          type: -1,
          orderNo: orderNo
        }
      });
    },
    getShopInfo(prodId, grId) {
      utilJs.getMethod(global.apiurl + 'goods/goodsDetail?mgId=' + prodId + '&grId=' + grId, res => {
        this.shopInfo = res.goods;
        this.freeShipping = res.freeShipping;
        this.payAwardData = res.payAwardData;
        const shopInfo = [
          {
            mgId: this.shopInfo.mgId,
            mcId: '',
            avatar: this.shopInfo.avatar ? this.shopInfo.avatar : '',
            pointsDeduct: 0,
            name: this.shopInfo.name,
            price: 0,
            originalPrice: this.shopInfo.originalPrice,
            quantity: 1,
            shopSpecInfo: '',
            gsiiId: '',
            postage: this.shopInfo.postage,
            isMail: this.shopInfo.isMail,
            isMallExpressDeliver: this.shopInfo.isMallExpressDeliver,
            isMallOfflineDeliver: this.shopInfo.isMallOfflineDeliver,
            stock: 1,
            salesStock: '',
            collageStock: '',
            freeShipping: this.freeShipping,
            isFlashSales: false,
            isCollage: false,
            pId: '',
            noLimit: false,
            vipDiscount: this.shopInfo.vipDiscount,
            svipDiscount: this.shopInfo.svipDiscount,
            agentDiscount: this.shopInfo.agentDiscount,
            partnerDiscount: this.shopInfo.partnerDiscount,
            branchDiscount: this.shopInfo.branchDiscount,
            isGiftRelate: true,
            limitType: -1,
            limitNumber: 0,
            purchasedNum: 0,
            vipDiscountType: this.shopInfo.vipDiscountType || 1
          }
        ];
        sessionStorage.setItem('shopBuyInfo', JSON.stringify(shopInfo));
        const goPath = '/mall/shopSettlement/shopSettlement?shopNo=' + prodId + '&grId=' + grId;
        this.$routerGo(this, 'push', {
          path: goPath
        });
      });
    },
    clickGoDetail(cItem) {
      let prodType = 0;
      let courseType = 0;
      if (this.popType == 2) {
        prodType = cItem.prodType;
        goDetails(this, prodType, cItem.id, { fromCourseId: this.fromCourseId });
        return;
      } else if (this.isFromOrder || this.hasBuy) {
        prodType = cItem.prodType == 110 || cItem.prodType == 111 || cItem.prodType == 112 ? this.cfrom.course : cItem.prodType;
        if (cItem.prodType == 112) {
          courseType = 2
        } else if (cItem.prodType == 111) {
          courseType = 1
        } else {
          courseType = 0
        }
      } else {
        prodType = cItem.relateType == 110 || cItem.relateType == 111 || cItem.relateType == 112 ? this.cfrom.course : cItem.relateType;
        if (cItem.relateType == 112) {
          courseType = 2
        } else if (cItem.relateType == 111) {
          courseType = 1
        } else {
          courseType = 0
        }
      }
      goDetails(this, prodType, this.isFromOrder || this.hasBuy ? cItem.prodId : cItem.relateId, {}, courseType);
    }
  }
};
</script>

<style scoped></style>
